<template>
  <div>
    <el-row>
      <el-button type="primary" @click="addSensitive()">添加敏感词</el-button>
    </el-row>
    <br>
    <br>
    <el-table :data="tableData.content" style="width: 100%">
      <el-table-column label="敏感词" width="180">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <span style="margin-left: 10px">{{ scope.row.word }}</span>
        </template>
      </el-table-column>

      <el-table-column label="最后编辑时间" width="180">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <span style="margin-left: 10px">{{ scope.row.madeTime }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isEnable"
            active-text="启用"
            @change="isEnableChange(scope.row.isEnable,scope.row.id)"
          ></el-switch>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 这是修改按钮弹窗 -->
    <el-dialog title="修改信息" :visible.sync="handleEditVisible" width="30%" center>
      <span slot="footer" class="dialog-footer">
        <el-form :model="form">
          <el-form-item label="原敏感词" :label-width="formLabelWidth">
            <el-input v-model="form.word" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="新敏感词" :label-width="formLabelWidth">
            <el-input v-model="form.newWord" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="handleEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 这是新建用户按钮弹窗 -->
    <el-dialog title="新增敏感词" :visible.sync="addSensitiveVisible" width="30%" center>
      <span slot="footer" class="dialog-footer">
        <el-form :model="form">
          <el-form-item label="新增词汇" :label-width="formLabelWidth">
            <el-input v-model="form.newWord" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.passwd" autocomplete="off"></el-input>
          </el-form-item>-->
        </el-form>
        <el-button @click="addSensitiveVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveWord()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      background
      @current-change="pageChange(currentPage)"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="prev, pager, next,jumper"
      :total="tableData.totalElements"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //消息
      messageValue: "",
      messageType: "",
      //后台数据
      tableData: [],
      // 编辑弹窗
      handleEditVisible: false,
      formLabelWidth: "20%",
      //新增用户弹窗
      addSensitiveVisible: false,
      // 是否删除
      visible2: false,
      form: {
        //数据对象
        id: "", //id
        word: "", //敏感词
        newWord: "", //新敏感词
        isEnable: "", //是否启用
        dr: "" //是否删除Î
      }
    };
  },
  methods: {
    // 消息弹窗
    message() {
      this.$message({
        showClose: true,
        message: this.messageValue,
        type: this.messageType
      });
    },
    //页面加载时获取用户数据
    getAllSensitive() {
      this.$axios({
        method: "get",
        url: "/sensitive/getAllSensitive",
        params: {
          page: 1,
          size: 10
        }
      }).then(successResponse => {
        this.tableData = successResponse.data;
        for (var i = 0; i < successResponse.data.totalElements; i++) {
          var dateee = new Date(this.tableData.content[i].madeTime).toJSON();
          var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
            .toISOString()
            .replace(/T/g, " ")
            .replace(/\.[\d]{3}Z/, "");
          this.tableData.content[i].madeTime = date;
        }
      });
    },
    // 页码改变
    pageChange(pageNum) {
      this.$axios({
        method: "get",
        url: "/sensitive/getAllSensitive",
        params: {
          page: pageNum,
          size: 10
        }
      }).then(successResponse => {
        this.tableData = successResponse.data;
        for (var i = 0; i < successResponse.data.totalElements; i++) {
          var dateee = new Date(this.tableData.content[i].madeTime).toJSON();
          var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
            .toISOString()
            .replace(/T/g, " ")
            .replace(/\.[\d]{3}Z/, "");
          this.tableData.content[i].madeTime = date;
        }
      });
    },
    // 改变用户的启用停用状态
    isEnableChange(isEnable, id) {
      this.$axios({
        method: "get",
        url: "/sensitive/setIsEnable",
        params: { isEnable: isEnable, id: id }
      }).then(successResponse => {
        if (successResponse.data == "success") {
          this.messageValue = "成功";
          this.messageType = "success";
          this.message();
        } else {
          this.messageValue = "失败";
          this.messageType = "error";
          this.message();
        }
        this.getAllSensitive(); //更新页面
      });
    },
    // 编辑按钮操作
    handleEdit(index, row) {
      //显示弹窗
      this.handleEditVisible = true;
      // 赋值
      this.form.word = row.word;
      this.form.id = row.id;
    },
    //保存编辑的内容
    saveEdit() {
      //保存内容
      this.$axios({
        method: "get",
        url: "/sensitive/saveEdit",
        params: { newWord: this.form.newWord, id: this.form.id }
      }).then(successResponse => {
        if (successResponse.data == "success") {
          this.messageValue = "成功";
          this.messageType = "success";
          this.message();
        } else {
          this.messageValue = "失败";
          this.messageType = "error";
          this.message();
        }
        this.getAllSensitive(); //更新页面
        this.form.word = "";
        this.form.newWord = "";
        this.form.id = "";
      });
      this.handleEditVisible = false;
    },
    // 删除账户
    handleDelete(index, row) {
      this.$axios({
        method: "get",
        url: "/sensitive/deleteWord",
        params: { id: row.id }
      }).then(successResponse => {
        if (successResponse.data == "success") {
          this.messageValue = "成功";
          this.messageType = "success";
          this.message();
        } else {
          this.messageValue = "失败";
          this.messageType = "error";
          this.message();
        }
        this.getAllSensitive(); //更新页面
      });
    },
    addSensitive() {
      this.addSensitiveVisible = true;
    },
    saveWord() {
      //保存新增的敏感词
      this.messageType = "error"; //先设置成错误，后面的判断就不用设置了，axios里面会根据返回值再给massagetype赋值
      if (this.form.newWord == "") {
        this.messageValue = "新增敏感词不能为空";
        this.message();
        return;
      }

      //保存内容
      this.$axios({
        method: "get",
        url: "/sensitive/saveWord",
        params: { newWord: this.form.newWord }
      }).then(successResponse => {
       if (successResponse.data == "success") {
          this.messageType = "success";
          this.messageValue = "新增敏感词成功";
          this.message();
        } else {
          this.messageType = "error";
          this.messageValue = "新增敏感词失败";
          this.message();
        }
        this.getAllSensitive(); //更新页面
        this.form.id = "";
        this.form.word = "";
        this.form.newWord = "";
      });
      this.addSensitiveVisible = false;
    }
  },
  created() {
    this.getAllSensitive();
  }
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #ffffff;
  color: #333;
  /* text-align: right; */
  /* margin-right: 20%; */
  line-height: 60px;
}
.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>
